/**
 * ============================================== 默认数据格式如下：按照grade升序排列，按照sort升序排列
 * [
 *      {id:'a',pid:'0',grade:'1',sort:'1',permissionName:'一级菜单1',category:'1',action:'#'},
 *      {id:'b',pid:'0',grade:'1',sort:'2',permissionName:'一级菜单2',category:'1',action:'#'},
 *      {id:'c',pid:'a',grade:'2',sort:'1',permissionName:'二级菜单1',category:'1action:'#'},
 *      {id:'d',pid:'b',grade:'2',sort:'1',permissionName:'二级菜单2',category:'1',action:'#'},
 *      {id:'e',pid:'c',grade:'3',sort:'1',permissionName:'三级菜单1',category:'1',action:'#'},
 *      {id:'f',pid:'d',grade:'3',sort:'1',permissionName:'三级菜单2',category:'2',action:'#'}
 * ];
 * ============================================== 默认展示grade=1的数据
 * 一级菜单1
 *      二级菜单1
 *          三级菜单1
 * 一级菜单2
 *      二级菜单2
 *          三级菜单2
 */
;(function ($) {
    $.fn.extend({
        /*
         * 功能：treeGrid
         * 示例：$("#id").treeGridLi({treeGridData:[],checkBoxId:"", subCheckBoxName:""});
         */
        "treeGridLI": function (options) {
            var defaluts = {
                treeGridId: "#tree_grid_li" // treeGrid的id
                , toggleIconOpenClass: "fa-chevron-right" // toggleIcon的class(加号)
                , toggleIconCloseClass: "fa-chevron-down" // toggleIcon的class(减号)
                , treeGridFill: "<i class='toggle-fill'></i>" // 偏移量（构成级联效果）
                , treeGridIconUp: "<i class='tree_grid_li_toggle toggle-icon fa fa-chevron-right'></i>" // 展开icon
                , treeGridIconDown: "<i class='tree_grid_li_toggle toggle-icon fa fa-chevron-down'></i>" // 收起icon
                , checkBoxId: "thead_checkbox" // 标题栏复选框的id属性值
                , subCheckBoxName: "tbody_checkbox" // 数据栏复选框的name属性值

            }; // 默认参数对象
            var settings = $.extend({}, defaluts, options); // 将defaluts和options对象合并到{}对象并返回
            var treeGrid = $(this); // treeGrid对象
            var theadCheckbox = treeGrid.find("thead tr th:eq(0) label input[type='checkbox']"); // thead中的checkBox对象
            var tbodyRows = treeGrid.find("tbody tr");  // tbody中tr数组对象
            var tbodyRowsLength = tbodyRows.length;
            var tbodyCheckbox = tbodyRows.find("td:eq(0) label input[type='checkbox']"); // tbody中checkBox数组对象

            // TODO 格式化treeGrid数据（默认初始化只展示所有grade='1'的行）
            for (var i = 0; i < tbodyRowsLength; i++) {
                var row = tbodyRows.eq(i);
                var rowId = row.attr("id");
                var rowGrade = row.attr("grade");
                var rowNext = tbodyRows.eq(i + 1);
                var rowNextPid = rowNext.attr("pid");
                // 如果该行含有子元素，则动态为其添加"展开icon"
                if (rowId === rowNextPid) {
                    row.find("td:eq(1)").prepend(settings.treeGridIconUp);
                }
                // 每行的第一列偏移量=单前行的grade-1，第二列的偏移量=单前行的grade
                for (var j = 1; j < rowGrade; j++) {
                    row.find("td:eq(1)").prepend(settings.treeGridFill);
                }
                // 初始化默认只显示grade='1'的行
                if (rowGrade !== "1") {
                    row.hide();
                } else {
                    row.show();
                }
            }
            // 当点击任意行的toggle-icon时，打开、关闭其儿子元素
            $(".tree_grid_li_toggle").on("click", function (event) { // toggle-icon绑定点击事件
                if (event.target.tagName === "I") {
                    var toggleIconRow = $(this).parents("tr"); // 当前toggle-icon的父级tr对象
                    var toggleIconRowIndex = toggleIconRow.index(); // tr的索引值
                    var toggleIconRowId = toggleIconRow.attr("id"); // tr的id属性值
                    var parentRowGrade = toggleIconRow.attr("grade"); // tr的grade属性值
                    //
                    var toggleIconClass = $(this).hasClass(settings.toggleIconOpenClass) ? settings.toggleIconOpenClass : settings.toggleIconCloseClass; // 当前toggle-icon的类型（fa-plus加号、fa-minus减号）
                    if (toggleIconClass === settings.toggleIconOpenClass) { // 打开其所有儿子元素
                        $(this).removeClass(toggleIconClass).addClass(settings.toggleIconCloseClass); // 更换toggle-icon图标
                        for (var i = (toggleIconRowIndex + 1); i < tbodyRowsLength; i++) {
                            var row = tbodyRows.eq(i);
                            var rowNext = tbodyRows.eq(i + 1);
                            if (row.attr("grade") === parentRowGrade || row.attr("grade") === '1') {
                                break;
                            }
                            if (row.attr("id") === rowNext.attr("pid")) { // 设置toggle-icon的图标
                                row.find("td:eq(1) i:last").removeClass(settings.toggleIconCloseClass).addClass(toggleIconClass);
                            }
                            if (row.attr("pid") === toggleIconRowId) { // 显示儿子元素
                                row.show();
                            }
                        }
                    } else { // 关闭其所有儿子元素
                        $(this).removeClass(toggleIconClass).addClass(settings.toggleIconOpenClass); // 更换toggle-icon图标
                        for (var i = (toggleIconRowIndex + 1); i < tbodyRowsLength; i++) {
                            var row = tbodyRows.eq(i);
                            if (row.attr("grade") === parentRowGrade || row.attr("grade") === '1') {
                                break;
                            }
                            row.hide();
                        }
                    }
                }
            });

            // TODO 为checkBox绑定点击事件
            theadCheckbox.on("click", function () { // 全选checkBox绑定点击事件
                theadCheckBoxCallback($(this));
            });
            tbodyCheckbox.on("click", function (event) { // 单选checkBox绑定点击事件
                if (event.target.tagName === "INPUT") {
                    tbodyCheckBoxCallback($(this));
                }
                event.stopPropagation(); // 阻止事件冒泡；// event.preventDefault(); // 阻止默认行为； return false; // 阻止事件冒泡，阻止默认行为；
            });
            // tbodyRows.on("click", function (event) { // 数据行绑定点击事件
            //     if (event.target.tagName === "TD") {
            //         $(this).find("td:eq(0) label input[name='tbody_checkbox']").trigger("click"); // 触发当前行中的复选框的click事件
            //     }
            // });

            /**
             * 全选回调函数
             * @param $this 当前thead中被点击的checkBox对象
             * $("input[name='username']:checkbox").prop("checked", true);
             */
            function theadCheckBoxCallback($this) {
                if ($this.is(":checked")) {
                    tbodyCheckbox.prop("checked", true);
                } else {
                    tbodyCheckbox.prop("checked", false);
                }
            }

            /**
             * 单选回调函数
             * @param $this 当前tbody中被点击的checkBox对象
             */
            function tbodyCheckBoxCallback($this) {
                var parentRow = $("tr[id='" + $this.val() + "']"); // 当前checkBox的父级tr对象
                var parentRowIndex = parentRow.index(); // tr的索引值
                var parentRowGrade = parentRow.attr("grade"); // tr的grade属性值
                if ($this.is(":checked")) {
                    // 勾选带有子节点的根节点时，级联勾选并显示其所有子节点
                    for (var i = (parentRowIndex + 1); i < tbodyRowsLength; i++) {
                        var row = tbodyRows.eq(i);
                        if (row.attr("grade") === parentRowGrade) {
                            break;
                        }
                        row.find("td:eq(0) label input[name='" + settings.subCheckBoxName + "']").prop("checked", true);
                    }
                    // 根据复选框的选中状态，回显标题栏复选框的选中状态
                    var checkSubObjs = $("input[name='" + settings.subCheckBoxName + "']"); // 所有的复选框集合对象（不包含标题栏中复选框）
                    var checkedSubs = 0; // 默认复选框选中个数（不包含标题栏中复选框）
                    $.each(checkSubObjs, function (index, checkSubObj) {
                        if (!checkSubObj.checked) {
                            return false;
                        }
                        checkedSubs += 1;
                    });
                    if (checkSubObjs.length === checkedSubs) {
                        $("input[id=" + settings.checkBoxId + "]:checkbox").prop("checked", true);
                    }
                } else {
                    // 取消子节点时则级联取消其所有父节点的选中状态
                    for (var i = (parentRowIndex + 1); i < tbodyRowsLength; i++) {
                        var row = tbodyRows.eq(i);
                        if (row.attr("grade") === parentRowGrade) {
                            break;
                        }
                        row.find("td:eq(0) label input[name='" + settings.subCheckBoxName + "']").prop("checked", false);
                    }
                    for (var i = (parentRowIndex - 1); i > -1; i--) {
                        var row = tbodyRows.eq(i);
                        if (row.attr("grade") === parentRowGrade) {
                            continue;
                        }
                        row.find("td:eq(0) label input[name='" + settings.subCheckBoxName + "']").prop("checked", false);
                        if (row.attr("grade") === '1') {
                            break;
                        }
                    }
                    // 根据复选框的选中状态，回显标题栏复选框的选中状态
                    $("input[id=" + settings.checkBoxId + "]:checkbox").prop("checked", false);
                }
            }
        }
    });
})(jQuery);